<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){

            // 开始写 jQuery 代码...
            // 给下拉列表绑定改变事件
            $("#cityId").change(function(){
                //alert($(this).val());
                window.location.href='http://localhost:9900/weather2/'+$(this).val();

            })

        });

    </script>
</head>
<style type="text/css">
    /*.card {*/
    /*    width: 150px;*/
    /*    height: 200px;*/
    /*    list-style: none;*/
    /*    display: inline-block;*/
    /*}*/
</style>
<body>
<!--
  1.引入Thymeleaf
  2.渲染文本数据  渲染对象类型  渲染List集合
  3.渲染天气数据
  --->
<h1>
    Mary's 天气
</h1>
<p>
    请选择城市：
    <select name="cityId" id="cityId">
        <option th:each="city:${cityList}" th:value="${city.cityId}" th:text="${city.city}"
                th:selected="${city.cityId eq cityIdArgs}">
        </option>
    </select>

</p>
<div>
    <h3>当前城市:<span th:text="${weatherdata.result.area}"></span></h3>

    <ul>

        <li th:each="daydata:${weatherdata.result.list}" class="card" style="width:10rem;height:28rem;display: inline-block;">


            <img th:src="@{'/png/'+${daydata.weatherimg}}"></img>
            <div class="card-body">
                <h5 class="card-title" th:text="${daydata.week}">Card title</h5>
                <p class="card-text" th:text="${daydata.date}">content</p>
                <p class="card-text" th:text="${daydata.weather}">content</p>
                <p class="card-text" th:text="${daydata.real}">content</p>
                <p class="card-text" th:text="${#strings.substring(daydata.tips,0,35)}" style="height:10rem;">content</p>
            </div>

        </li>




    </ul>






</div>

</body>
</html>